<template>

  <a-spin :spinning="loading">
    <a-card>
      <section slot="title">医生列表</section>
      <a-row :gutter="16">
        <a-col :span="5">
          <span class="label">ID：</span>
          <a-input :max-length="100" allow-clear v-model="id" placeholder="请输入" />
        </a-col>
        <a-col :span="5">
          <span class="label">手机号：</span>
          <a-input :max-length="100" allow-clear v-model="mobile" placeholder="请输入" />
        </a-col>
        <a-col :span="5">
          <span class="label">登录日期：</span>
          <a-range-picker @change="onChange" v-model='loginDate'/>
        </a-col>
       <!-- <a-col :span="5">
          <span class="label">年龄：</span>
          <a-input :max-length="100" allow-clear v-model="age" placeholder="请输入" />
        </a-col> -->

        <a-col :span="5">
          <span class="label">注册日期：</span>
          <a-range-picker @change="onChange2" v-model='createTime'/>
        </a-col>
        <a-col :span="5">
          <span class="label">真实姓名：</span>
          <a-input :max-length="100" allow-clear v-model="name" placeholder="请输入" />
        </a-col>

        <a-col :span="8">
          <a-button class="ml-18" type="primary" @click="search">查询</a-button>
          <a-button class="mx-8" @click="reset">重置</a-button>
          <!-- <a-button @click="getEdit" class="mx-8" type="primary">新增</a-button> -->
          <a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button>
        </a-col>
      </a-row>
      <a-table
        class="mt-16 order-table"
        :columns="columns"
        :data-source="data"
        :scroll="scroll"
        :pagination="pagination"
      >
        <template #createTime='createTime, data'>
          {{ $utils.formatTimestamp(data.createTime) }}
        </template>
        <template #loginDate='loginDate, data'>
          {{ data.loginDate?$utils.formatTimestamp(data.loginDate):'无' }}
        </template>
        <template #sex="sex, data">
          {{ data.sex == 1 ? '男' : '女' }}
        </template>
        <template #status="status, data">
          {{ data.status == 1 ? '正常' : '禁用' }}
        </template>
        <template #skillingRemark="skillingRemark, data">
          <span style="width: 100px;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;display: inline-block">{{data.skillingRemark}}</span>
        </template>
        <template #action="action, data">
          <div class="flex items-center justify-center">
            <a-button @click="goCharts(data)" style="background: 	#32CD32;" type="primary">
              编辑
            </a-button>



					</div>
				</template>
			</a-table>
			<!-- <a-divider  /> -->
		</a-card>
		<create @upload="upload" ref="create"></create>
	</a-spin>
</template>
<script>

import create from './components/create.vue'
import { doctorpage } from '@/api/index'
import { tableMixins } from '@/utils/mixins'
export default {
  mixins: [tableMixins],
  components: {
    create
  },
  data() {
    return {
      loading: false,
      tabs: 'select1',
      id: '',
      createTime: [],
      loginDate:[],
      mobile:'',
      age:'',
      groupType:'',
      name:'',
      status: null,
      orderStatusEnums: [
        { value: 1, name: '正常' },
        { value: 0, name: '禁用' }
      ],
      data: [],
      columns: [
        { title: '序号', dataIndex: 'id', align: 'center', width: 140, scopedSlots: { customRender: 'id' } },
        { title: 'ID', dataIndex: 'id', align: 'center', width: 140, scopedSlots: { customRender: 'id' } },
        {
          title: '手机号',
          dataIndex: 'mobile',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'mobile' }
        },
        { title: '真实姓名', dataIndex: 'name', align: 'center', width: 70, scopedSlots: { customRender: 'name' } },
        { title: '类型', dataIndex: 'groupName', align: 'center', width: 70, scopedSlots: { customRender: 'groupName' } },


        { title: '擅长领域', dataIndex: 'skillingRemark', align: 'center', width: 70, scopedSlots: { customRender: 'skillingRemark' } },
        { title: '年龄', dataIndex: 'age', align: 'center', width: 70, scopedSlots: { customRender: 'age' } },
        { title: '状态', dataIndex: 'status', align: 'center', width: 70, scopedSlots: { customRender: 'status' } },
        { title: '性别', dataIndex: 'sex', align: 'center', width: 70, scopedSlots: { customRender: 'sex' } },
        // { title: '注册时间', dataIndex: 'createTime', align: 'center', width: 120, scopedSlots: { customRender: 'createTime' } },
        { title: '最后登录时间', dataIndex: 'loginDate', align: 'center', width: 120, scopedSlots: { customRender: 'loginDate' } },

        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          width: 160,
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.search()
  },
  methods: {
    onChange2(e) {
      this.createTime = [this.$utils.getStartTime(e[0]._d), this.$utils.getEndTime(e[1]._d)]
    },
    onChange(e) {
      this.loginDate = [this.$utils.getStartTime(e[0]._d), this.$utils.getEndTime(e[1]._d)]
    },
    search() {
      this.pageNum = 1
      this.getData()
    },
    upload() {
      this.search()
    },
    delect(data) {
      this.$confirm({
        title: '删除',
        content: `请确认是否取消该商品？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          console.log('删除')
          return
          this.loading = true
          deductionDetail({
            deductId: data.id
          })
            .then(res => {
              this.$message.success('删除成功！')


								this.search()

              this.loading = false
            })
            .finally(() => (this.loading = false))
        }
      })
    },
    goCharts(data) {
      this.$refs.create.open(data)
    },
    getEdit(data) {
      this.$refs.create.open(data)
    },
    getSearchParams() {
      return {
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        id: this.id,
        createTime: this.createTime,
        loginDate:this.loginDate,
        mobile:this.mobile,
        age:this.age,
        groupType:2,
        name:this.name,
      }
    },
    getData() {
      this.loading = true
      doctorpage(this.getSearchParams())
        .then(data => {
          this.total = data.total
          this.data = data.list
        })
        .finally(() => (this.loading = false))
    },
    reset() {
      this.id= ''
      this.createTime= []
      this.loginDate=[]
      this.mobile=''
      this.age=''
      this.name=''
    }
  }
}

</script>
<style lang="less" scoped>
	.ant-col {
		margin-bottom: 20px;
		display: flex;
		align-items: center;

		.label {
			flex-shrink: 0;
			width: 100px;
			text-align: right;
			font-size: 14px;
			color: #595959;
		}

		.w-full {
			flex: 1;
		}
	}
</style>